<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>animation</title>
    <link rel="stylesheet" href="../../styles/normalize.css" />
    <style type="text/css">
      .box {
        background-color: rebeccapurple;
        border-radius: 10px;
        width: 100px;
        height: 100px;
      }
      .box.rotate:hover {
        animation-name: rotate, move-right;
        animation-delay: 480ms, 21.1s;
        animation-duration: 34s;
      }
      /* .box.move-right:hover {
        animation-name: move-right;
        animation-delay: 2s;
        animation-duration: 3s;
      } */

      @keyframes rotate {
        0% {
          transform: rotate(0);
        }
        100% {
          transform: rotate(360deg);
        }
      }
      @keyframes move-right {
        from {
          margin-left: 0;
        }

        to {
          margin-left: 400px;
        }
      }
    </style>
  </head>
  <body>
    <!--
        正值表示动画应在指定的时间量过去后开始。
        默认值为 0s，表示动画应立即开始。
    -->
    <div class="box rotate move-right"></div>
  </body>
</html>
